<template>
  <div class="pg-finance-user-flow"
    layout="column">
    
    <!-- 页面搜索组件
    -------------------------- -->
    <comp-page-search
      :metaList="searchConfig"
      @searchCondChange="searchCondChange"
      module="PgShaohuoPersonList"></comp-page-search>
    
    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-button @click.native="exportCurrent()"
        type="primary" size="mini"
        :loading="loadingBtn === '导出数据' && loadingRow === null">导出数据</el-button>
      <iframe width="0" height="0" frameborder="0" name="exportIframe" style="display: none"></iframe>
    </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
    </comp-page-table>

  </div>
</template>

<script>
import { tableConfig, searchConfig } from './config'
import {
  listSearchMixin,
  listExportMixin
} from './mixins'

import { FinanceFlowService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  tableExportMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgFinanceUserFlow',
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableExportMixin,
    listSearchMixin,
    listExportMixin
  ],
  data () {
    return {
      tableConfig,
      searchConfig
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 获取全部捎货人种类信息参数
    UserPayListParam () {
      return {
        acc_id: this.acc_id,
        page: this.page,
        page_size: this.pageSize,
        sort_field: this.sort_field,
        sort_type: this.sort_type,
        search: this.search,
        pay_event: this.payEvent,
        start_time: this.startTime,
        end_time: this.endTime
      }
    }
  },
  methods: {
    // 捎货人列表
    preFetchTableData () {
      return FinanceFlowService.UserPayList(this.UserPayListParam)
    },
    tableDataHandler (list) {
      list.map(i => {
        switch (i.pay_event) {
          case '1':
            i.payEventName = '充值'
            break
          case '2':
            i.payEventName = '下单'
            break
          case '3':
            i.payEventName = '提现'
            break
          case '4':
            i.payEventName = '收入'
        }
        return i
      })
      return list
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(finance-user-flow) {}
</style>
